<!-- /*
*   @Description:二次封装ElementUI的table表格组件
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div class="TableTemplateBox">
    <el-table 
        ref="TableTemplateRef" 
        :data="elTableListData"
        :height="height"
        :maxHeight="maxHeight"
        :show-header="showHeader"
        :highlight-current-row="highlightCurrentRow"
        :fit="fit"
        :stripe="stripe"
        :border="border"
        @selection-change="selectionChangeFunction"
        @row-click="rowClickFunction"
    >
        <!-- 勾选框 -->
        <el-table-colum v-if="tickBox" type="selection" width="60" aligin="left"></el-table-colum>
        <!-- 序列号 -->
        <el-table-column v-if="serialNumber" type="index" label="序号" width="80" align="center">
            <template #default="scope">
                <span>
                    {{ 0+scope.$index+1 }}
                </span>
            </template>
        </el-table-column>

        <template v-for="(item,index) in elTableListConfig">
            <!-- 操作列 / 自定义列 -->
            <el-table-column 
                :label="item.label"
                :align="item.aligin || 'left'"
                :header-align="item.headerAlign || 'left'"
                :show-overflow-tooltip="item.tooltip || true"
                :min-width="item.minWidth"
                :width="item.width"
                :fixed="item.fixed"
                :class-name="item.className"
            >
                <template slot-scope="scope">
                    <!-- 1.带点击事件的 -->
                    <template v-if="item.eventType === 'click'">
                        <a href="http://www.baidu.com" :style="item.style" @click="$event=>handlerClickDeatils(scope.row,item)">{{ scope.row[item.prop] }}</a>
                    </template>
                        <!-- 2.可以对数据二次操作的 -->
                    <template v-else-if="item.type === 'filter'">
                        <span :style="item.style">{{ item.filter(scope.row) }}</span>
                    </template>
                        <!-- 3.普通的 -->
                    <template v-else>
                        <span :style="item.style">{{ scope.row[item.prop] }}</span>
                    </template>

                    <!-- 渲染操作按钮 -->
                    <div v-if="item.label == '操作'" class="btnDivClass">
                        <slot name="btnSlotName" :item="scope.row"></slot>
                    </div>
                </template>
            </el-table-column>
        </template>
    </el-table>




  </div>
</template>

<script>
export default {
  name: "TableTemplate",
  props:{
    //是否显示勾选框
    tickBox:{
        typeof:Boolean,
        default:false
    },
    //是否显示序列号
    serialNumber:{
        typeof:Boolean,
        default:true
    },
    //表头数据
    elTableListData:{
        typeof:Array,
        default:()=>[]
    },
    // 表头行配置
    elTableListConfig:{
        typeof:Array,
        default:()=>[]
    },
    // Table表格的高度
    height:[String,Number],
    //最大高度
    maxHeight:[String,Number],
    // 是否显示表头
    showHeader:{
        typeof:Boolean,
        default:true
    },
    //是否要高亮当前行
    highlightCurrentRow:{
        typeof:Boolean,
        default:false
    },
    // 列的宽度是否自动撑开
    fit:{
        typeof:Boolean,
        default:true
    },
    // 是否带有纵向边框
    border:{
        typeof:Boolean,
        default:false
    },
    // 是否为斑马纹 table
    stripe:{
        typeof:Boolean,
        default:false
    },
  },
  data() {
    return {};
  },
  methods:{
    //点击勾选
    selectionChangeFunction(val){
        this.$emit('selectionChangeFunction',{val})
    },
    // 行点击
    rowClickFunction(val){
        this.$emit('rowClickFunction',{val})
    },
    //点击表格中的数据
    handlerClickDeatils(valData,item){
        console.log(valData,item)
        this.$emit('handlerClickDeatils',{valData,item})
    }
  }
};
</script>

<style scoped lang="less">
.btnDivClass{
    :deep(.el-button--text){
        padding: 0px !important;
    }
}
</style>
